<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td id="tdContainer" style="padding:0px;">
<div id="container" style="width:600px;height:450px;border:25px solid #000000;">
<table width="100%" cellpadding="0" cellspacing="5" border="0">
	<TR> <TD align="center" valign="middle" height="205px">
		<input type="button" onclick="startGame()" value="Start" id="startR" />
		<input type="button" onclick="submitReflex()" value="STOP" id="submitR"/>
	</TD></TR>
</table>
</div>
<script language="javascript" type="text/javascript">
function _gel(id){ return document.getElementById(id);}
_gel("container").style.border="25px solid #000000";
_gel("submitR").disabled="disabled";
var reflexTimeStart,reflexTimeEnd, result;
var globalInterval,gameInterval;

function startGame(){
	reflexTimeStart=null;
	_gel("startR").disabled="disabled";
	_gel("submitR").disabled="";
	var intMS=1000+Math.random()*1000+Math.random()*2000+Math.random()*1000;
	globalInterval=window.setTimeout("giveMeRed()" ,intMS);
	
}
function giveMeRed(){
	_gel("container").style.border="25px solid #ff0000";
	reflexTimeStart=parseInt(Date.parse(new Date().toGMTString()))+new Date().getMilliseconds();
}

function hideRed(){
_gel("container").style.border="25px solid #000000";
}

function submitReflex(){
	if(reflexTimeStart){
		reflexTimeEnd=parseInt(Date.parse(new Date().toGMTString()))+new Date().getMilliseconds();
		result=(reflexTimeEnd-reflexTimeStart)/1000;
		_gel("startR").disabled="";
		_gel("submitR").disabled="disabled";
		alert(result);
		hideRed();
	}else{
		alert("Too eager to wait for the red box to appear! eh!\n Restarting game");
		startGame();
	}
	
}


</script>
</td>
</tr>
</table>
<textarea rows="30" cols="80" id="d"></textarea>
</body>
</html>



<div id="container" style="width:650px;height:500px;border:25px solid #000000;">
<table width="100%" cellpadding="0" cellspacing="5" border="0">
	<TR> <TD align="center" valign="middle" height="205px">
		<input type="button" onclick="startGame()" value="Start" id="startR" />
		<input type="button" onclick="submitReflex()" value="STOP" id="submitR"/>
	</TD></TR>
</table>
</div>
<script language="javascript" type="text/javascript">

_gel("container").style.border="25px solid #000000";
_gel("submitR").disabled="disabled";
var reflexTimeStart,reflexTimeEnd, result;
var globalInterval,gameInterval;

function startGame(){
	reflexTimeStart=null;
	_gel("startR").disabled="disabled";
	_gel("submitR").disabled="";
	var intMS=1000+Math.random()*1000+Math.random()*2000+Math.random()*1000;
	globalInterval=window.setTimeout("giveMeRed()" ,intMS);
	
}
function giveMeRed(){
	_gel("container").style.border="25px solid #ff0000";
	reflexTimeStart=parseInt(Date.parse(new Date().toGMTString()))+new Date().getMilliseconds();
}

function hideRed(){
_gel("container").style.border="25px solid #000000";
}

function submitReflex(){
	if(reflexTimeStart){
		reflexTimeEnd=parseInt(Date.parse(new Date().toGMTString()))+new Date().getMilliseconds();
		result=(reflexTimeEnd-reflexTimeStart)/1000;
		_gel("startR").disabled="";
		_gel("submitR").disabled="disabled";
		alert(result);
		hideRed();
	}else{
		alert("Too eager to wait for the red box to appear! eh!\n Restarting game");
		startGame();
	}
	
}
function init(){

}

</script>
